<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>jQuery 插件使用记录 | 净土</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="dragsort; Validform; bootstrap-datetimepicker; highcharts; jQuery File Upload; uploadify; Plupload; Dropzonejs; Web Uploader; zyFile;">
<meta property="og:type" content="article">
<meta property="og:title" content="jQuery 插件使用记录">
<meta property="og:url" content="http://howiefh.github.io/2014/12/24/jQuery-plug-in/index.html">
<meta property="og:site_name" content="净土">
<meta property="og:description" content="dragsort; Validform; bootstrap-datetimepicker; highcharts; jQuery File Upload; uploadify; Plupload; Dropzonejs; Web Uploader; zyFile;">
<meta property="og:updated_time" content="2014-12-24T15:30:16.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="jQuery 插件使用记录">
<meta name="twitter:description" content="dragsort; Validform; bootstrap-datetimepicker; highcharts; jQuery File Upload; uploadify; Plupload; Dropzonejs; Web Uploader; zyFile;">
  
    <link rel="alternative" href="/atom.xml" title="净土" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.ico">
  
  <link href="http://fonts.useso.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="/css/style.css" type="text/css">
  
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-40492061-1', 'auto');
ga('send', 'pageview');

</script>


  
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?56d2899c5e919fbf4a7b00de5d1c31dd";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


</head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">净土</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">乐不在外而在心，心以为乐，则是境皆乐；心以为苦，则无境不苦。</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-github-link" class="nav-icon" href="https://github.com/howiefh" title="Github" target="_blank"></a>
        
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed" target="_blank"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" results="0" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://howiefh.github.io"></form>
      </div>
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main"><article id="post-jQuery-plug-in" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    
<a href="/2014/12/24/jQuery-plug-in/" class="article-date">
  <time datetime="2014-12-24T07:20:47.000Z" itemprop="datePublished">2014-12-24</time>
</a>


    
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>►<a class="article-category-link" href="/categories/JavaScript/jQuery/">jQuery</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      jQuery 插件使用记录
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
		
		<div id="toc" class="toc-article">
			<h2 class="toc-title"><span>Contents</span></h2>
		
			<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#dragsort"><span class="toc-number">1.</span> <span class="toc-text">dragsort</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#下载地址：http://dragsort-codeplex-com/"><span class="toc-number">1.1.</span> <span class="toc-text">下载地址：http://dragsort.codeplex.com/</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用方法"><span class="toc-number">1.2.</span> <span class="toc-text">使用方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#一个table示例"><span class="toc-number">1.3.</span> <span class="toc-text">一个table示例</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Validform"><span class="toc-number">2.</span> <span class="toc-text">Validform</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#下载地址：http://validform-rjboy-cn/"><span class="toc-number">2.1.</span> <span class="toc-text">下载地址：http://validform.rjboy.cn/</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用方法-1"><span class="toc-number">2.2.</span> <span class="toc-text">使用方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#绑定附加属性"><span class="toc-number">2.3.</span> <span class="toc-text">绑定附加属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#参数说明"><span class="toc-number">2.4.</span> <span class="toc-text">参数说明</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#公用对象"><span class="toc-number">2.5.</span> <span class="toc-text">公用对象</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#bootstrap-datetimepicker"><span class="toc-number">3.</span> <span class="toc-text">bootstrap-datetimepicker</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#highcharts"><span class="toc-number">4.</span> <span class="toc-text">highcharts</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#下载地址:_http://code-highcharts-com/"><span class="toc-number">4.1.</span> <span class="toc-text">下载地址: http://code.highcharts.com/</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#中文网:_http://www-hcharts-cn/"><span class="toc-number">4.2.</span> <span class="toc-text">中文网: http://www.hcharts.cn/</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#上传文件"><span class="toc-number">5.</span> <span class="toc-text">上传文件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#jQuery_File_Upload"><span class="toc-number">5.1.</span> <span class="toc-text">jQuery File Upload</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Uploadify"><span class="toc-number">5.2.</span> <span class="toc-text">Uploadify</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Plupload"><span class="toc-number">5.3.</span> <span class="toc-text">Plupload</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#DropzoneJS"><span class="toc-number">5.4.</span> <span class="toc-text">DropzoneJS</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Web_Uploader"><span class="toc-number">5.5.</span> <span class="toc-text">Web Uploader</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#zyFile"><span class="toc-number">5.6.</span> <span class="toc-text">zyFile</span></a></li></ol></li></ol>
		
		</div>
		
        <p>记录几个自己了解到的jQuery插件: dragsort、Validform、bootstrap-datetimepicker、highcharts、jQuery File Upload、uploadify、Plupload、Dropzonejs、Web Uploader、zyFile。</p>
<a id="more"></a>
<h2 id="dragsort">dragsort</h2><h3 id="下载地址：http://dragsort-codeplex-com/">下载地址：<a href="http://dragsort.codeplex.com/" target="_blank" rel="external">http://dragsort.codeplex.com/</a></h3><h3 id="使用方法">使用方法</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"ul"</span>).dragsort(&#123;</span><br><span class="line">    dragSelector: <span class="string">"li"</span>,</span><br><span class="line">    dragEnd: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123; &#125;,</span><br><span class="line">    dragBetween: <span class="literal">false</span>,</span><br><span class="line">    placeHolderTemplate: <span class="string">"&lt;li&gt;&lt;/li&gt;"</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>jquery list dragsort列表拖动插件参数说明</p>
<ul>
<li>dragSelector<br>  CSS选择器内的元素的列表项的拖动手柄。默认值是“li”。</li>
<li>dragSelectorExclude<br>  CSS选择器的元素内的dragSelector不会触发dragsort的。默认值是“input, textarea, a[href]”。</li>
<li>dragEnd<br>  拖动结束后将被调用的回调函数.</li>
<li>dragBetween<br>  设置为“true”，如果你要启用多组列表之间拖动选定的列表。 默认值是false。</li>
<li>placeHolderTemplate<br>  拖动列表的HTML部分。默认值是<code>&lt;li&gt;&lt;/li&gt;</code>.</li>
<li>scrollContainer<br>  CSS选择器的元素，作为滚动容器，例如溢出的div设置为自动。 默认值是“窗口“.</li>
<li>scrollSpeed<br>  一个数字，它代表了速度，页面拖动某一项时，将滚动容器外，较高使用价值的是速度和较低的值是较慢的。 如果设置为“0”以禁用滚动。默认值是“5”.</li>
</ul>
<h3 id="一个table示例">一个table示例</h3><p>下载的压缩包中提供了ul的示例，下面是一个table的示例</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">table</span>  <span class="attribute">id</span>=<span class="value">'tableid'</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="title">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="title">td</span>&gt;</span>999999<span class="tag">&lt;/<span class="title">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="title">td</span>&gt;</span>923123<span class="tag">&lt;/<span class="title">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="title">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="title">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="title">td</span>&gt;</span>123123<span class="tag">&lt;/<span class="title">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="title">td</span>&gt;</span>123123<span class="tag">&lt;/<span class="title">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="title">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="title">table</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span>&gt;</span><span class="javascript"></span><br><span class="line">    $(<span class="string">"#tableid"</span>).dragsort(&#123;</span><br><span class="line">    dragSelector : <span class="string">"tr"</span>,  <span class="comment">//可以不用设置，他会根据$("#tableid")的类型来决定是tr还是li</span></span><br><span class="line">    dragEnd : <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log($(<span class="keyword">this</span>));  <span class="comment">//拖动完成的回调函数，$(this)当前拖动对象</span></span><br><span class="line">    &#125;,</span><br><span class="line">    scrollSpeed:<span class="number">0</span>,  <span class="comment">//默认为5，数值越大拖动的速度越快，为0则拖动时页面不会滚动</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="Validform">Validform</h2><p>Validform：一行代码搞定整站的表单验证！</p>
<h3 id="下载地址：http://validform-rjboy-cn/">下载地址：<a href="http://validform.rjboy.cn/" target="_blank" rel="external">http://validform.rjboy.cn/</a></h3><h3 id="使用方法-1">使用方法</h3><p>Validform是国人写的插件，<a href="http://validform.rjboy.cn/document.html" target="_blank" rel="external">中文文档</a>很详细。下面介绍一下基本使用方法。</p>
<ol>
<li><p>引入css</p>
<p> 请查看下载文件中的style.css，把里面Validform必须部分复制到你的css中（文件里这个注释 “/<em>==========以下部分是Validform必须的===========</em>/“ 之后的部分是必须的）。之前发现有部分网友把整个style.css都引用在了页面里，然后发现样式冲突了。</p>
</li>
<li><p>引入js （jquery 1.4.3 以上版本都可以，官网写的是1.4.3以上版本，但是需要调用外部插件datepicker的话，最新的jQuery貌似不行，最好使用它使用的1.6.2版本的）</p>
 <figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"http://validform.rjboy.cn/wp-content/themes/validform/js/jquery-1.6.2.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"http://validform.rjboy.cn/Validform/v5.1/Validform_v5.1_min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>给需要验证的表单元素绑定附加属性</p>
 <figure class="highlight nix"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;form <span class="variable">class=</span><span class="string">"demoform"</span>&gt;</span><br><span class="line">&lt;input <span class="variable">type=</span><span class="string">"text"</span> <span class="variable">value=</span><span class="string">""</span> <span class="variable">name=</span><span class="string">"name"</span> <span class="variable">datatype=</span><span class="string">"s5-16"</span> <span class="variable">errormsg=</span><span class="string">"昵称至少5个字符,最多16个字符！"</span> /&gt;</span><br><span class="line">&lt;/form&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>初始化，就这么简单</p>
 <figure class="highlight openscad"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$<span class="params">(<span class="string">".demoform"</span>)</span>.Validform<span class="params">()</span>;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h3 id="绑定附加属性">绑定附加属性</h3><ul>
<li>datatype<br>  内置基本的datatype类型有： <code>* | *6-16 | n | n6-16 | s | s6-18 | p | m | e | url</code>。最新版本可以直接绑定正则：如可用这样写<code>datatype=&quot;/\w{3,6}/i&quot;</code>，并且网站提供了一个datatype扩展文件<a href="http://validform.rjboy.cn/Validform/Validform_Datatype.js" target="_blank" rel="external">Validform_Datatype</a>。</li>
<li>nullmsg<br>  当表单元素值为空时的提示信息，不绑定，默认提示”请填入信息！”。5.3+会自动查找class为Validform_label下的文字作为提示文字</li>
<li>sucmsg 5.3+<br>  当表单元素通过验证时的提示信息，不绑定，默认提示”通过信息验证！”。</li>
<li>errormsg<br>  输入内容不能通过验证时的提示信息，默认提示”请输入正确信息！”。</li>
<li>ignore<br>  绑定了ignore=”ignore”的表单元素，在有输入时，会验证所填数据是否符合datatype所指定数据类型，没有填写内容时则会忽略对它的验证；</li>
<li>recheck<br>  表单里面经常需要检查两次密码输入是否一致，recheck就是用来指定需要比较的另外一个表单元素。</li>
<li>ajaxurl<br>  指定ajax实时验证的后台文件的地址。Ajax中会POST过来变量param和name。param是文本框的值，name是文本框的name属性。  <figure class="highlight openscad"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">var demo=$<span class="params">(<span class="string">".formsub"</span>)</span>.Validform<span class="params">()</span></span><br><span class="line">demo.config<span class="params">(&#123;</span><br><span class="line">    ajaxurl:&#123;</span><br><span class="line">        //可以传入$.ajax<span class="params">()</span>能使用的，除dataType外的所有参数;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span></span><br></pre></td></tr></table></figure>
  后台返回json格式的数据:<code>{status:&quot;y&quot;,info:&quot;tip&quot;}</code>，如果status是y则提示成功，n则提示失败。</li>
<li>plugin<br>  指定需要使用的插件。<br>  5.3版开始，对于日期、swfupload和密码强度检测这三个插件，绑定了plugin属性即可以初始化对应的插件，可以不用在validform初始化时传入空的usePlugin了。</li>
</ul>
<h3 id="参数说明">参数说明</h3><ul>
<li>tiptype<br>  可用的值有：1、2、3、4和function函数，默认tiptype为1。 3、4是5.2.1版本新增<br>  1=&gt; 自定义弹出框提示；<br>  2=&gt; 侧边提示(会在当前元素的父级的next对象的子级查找显示提示信息的对象，表单以ajax提交时会弹出自定义提示框显示表单提交状态)；<br>  3=&gt; 侧边提示(会在当前元素的siblings对象中查找显示提示信息的对象，表单以ajax提交时会弹出自定义提示框显示表单提交状态)；<br>  4=&gt; 侧边提示(会在当前元素的父级的next对象下查找显示提示信息的对象，表单以ajax提交时不显示表单的提交状态)；  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">".registerform"</span>).Validform(&#123;</span><br><span class="line">        tiptype:<span class="function"><span class="keyword">function</span>(<span class="params">msg,o,cssctl</span>)</span>&#123;</span><br><span class="line">            <span class="comment">//msg：提示信息;</span></span><br><span class="line">            <span class="comment">//o:&#123;obj:*,type:*,curform:*&#125;, obj指向的是当前验证的表单元素（或表单对象），type指示提示的状态，值为1、2、3、4， 1：正在检测/提交数据，2：通过验证，3：验证失败，4：提示ignore状态, curform为当前form对象;</span></span><br><span class="line">            <span class="comment">//cssctl:内置的提示信息样式控制函数，该函数需传入两个参数：显示提示信息的对象 和 当前提示的状态（既形参o中的type）;</span></span><br><span class="line">            <span class="keyword">if</span>(!o.obj.is(<span class="string">"form"</span>))&#123;<span class="comment">//验证表单元素时o.obj为该表单元素，全部验证通过提交表单时o.obj为该表单对象;</span></span><br><span class="line">                <span class="keyword">var</span> objtip=o.obj.siblings(<span class="string">".Validform_checktip"</span>);</span><br><span class="line">                cssctl(objtip,o.type);</span><br><span class="line">                objtip.text(msg);</span><br><span class="line">            &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">                <span class="keyword">var</span> objtip=o.obj.find(<span class="string">"#msgdemo"</span>);</span><br><span class="line">                cssctl(objtip,o.type);</span><br><span class="line">                objtip.text(msg);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        ajaxPost:<span class="literal">true</span></span><br><span class="line">    &#125;);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
<li>ajaxPost<br>  可用值： true | false。<br>  默认为false，使用ajax方式提交表单数据，将会把数据POST到config方法或表单action属性里设定的地址；</li>
<li>datatype<br>  传入自定义datatype类型，可以是正则，也可以是函数。  <figure class="highlight elixir"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="symbol">datatyp:</span>&#123;</span><br><span class="line">    <span class="string">"zh2-4"</span><span class="symbol">:/^</span>[\u4E0<span class="number">0</span>-\u9FA5\uf90<span class="number">0</span>-\ufa2d]&#123;<span class="number">2</span>,<span class="number">4</span>&#125;<span class="variable">$/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li>callback<br>  在使用ajax提交表单数据时，数据提交后的回调函数。返回数据data是Json对象：{“info”:”demo info”,”status”:”y”}。后台可以返回额外的数据供处理</li>
</ul>
<h3 id="公用对象">公用对象</h3><p>$.Showmsg(msg)<br>调用Validform自定义的弹出框。<br>参数msg是要显示的提示文字。<br>如$.Showmsg(“这是提示文字”); //如果不传入信息则不会有弹出框出现，像$.Showmsg()这样是不会弹出提示框的。</p>
<h2 id="bootstrap-datetimepicker">bootstrap-datetimepicker</h2><p>用Google搜索可以搜到三个不同的同名插件</p>
<ol>
<li><a href="http://eonasdan.github.io/bootstrap-datetimepicker/" target="_blank" rel="external">http://eonasdan.github.io/bootstrap-datetimepicker/</a></li>
<li><a href="http://www.bootcss.com/p/bootstrap-datetimepicker/" target="_blank" rel="external">http://www.bootcss.com/p/bootstrap-datetimepicker/</a> bootstrap中文网有详细介绍</li>
<li><a href="http://tarruda.github.io/bootstrap-datetimepicker/" target="_blank" rel="external">http://tarruda.github.io/bootstrap-datetimepicker/</a> 作者是neovim项目的发起者，这个项目fork自eonasdan，已经很久没更新了</li>
</ol>
<p>简单介绍一下第一个，首先需要引入一下这些文件</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">type</span>=<span class="value">"text/css"</span> <span class="attribute">href</span>=<span class="value">"css/bootstrap.min.css"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">type</span>=<span class="value">"text/css"</span> <span class="attribute">href</span>=<span class="value">"css/bootstrap-datetimepicker.min.css"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"js/jquery-1.8.2.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"js/bootstrap.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"js/moment.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"js/bootstrap-datetimepicker.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 需要给input添加一个属性  data-date-format 设置日期的格式 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">class</span>=<span class="value">"form-control"</span> <span class="attribute">id</span>=<span class="value">"datetimepicker2"</span> <span class="attribute">data-date-format</span>=<span class="value">"YYYY-MM-DD HH:mm:ss"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span><br><span class="line">$(<span class="string">'input[data-date-format]'</span>).datetimepicker(&#123;</span><br><span class="line">	useSeconds: <span class="literal">true</span>     <span class="comment">//设置时间时可以设置秒</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="highcharts">highcharts</h2><p>功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库</p>
<h3 id="下载地址:_http://code-highcharts-com/">下载地址: <a href="http://code.highcharts.com/" target="_blank" rel="external">http://code.highcharts.com/</a></h3><h3 id="中文网:_http://www-hcharts-cn/">中文网: <a href="http://www.hcharts.cn/" target="_blank" rel="external">http://www.hcharts.cn/</a></h3><h2 id="上传文件">上传文件</h2><p>这类组件比较多，下面列出我搜到的几个还不错的。</p>
<h3 id="jQuery_File_Upload"><a href="https://github.com/blueimp/jQuery-File-Upload" target="_blank" rel="external">jQuery File Upload</a></h3><p>jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。<br>jQuery File Upload有多个文件选择，拖放上传控件拖放支持，进度条，验证和预览图像，音频和视频 。<br>支持跨域，分块和可恢复的文件上传和客户端图像大小调整。适用于任何服务器端平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.） ，支持标准的HTML表单文件上传。</p>
<p>两篇可以参考的博客<br><a href="http://blog.csdn.net/huangcongjie/article/details/38793909" target="_blank" rel="external">jQuery File Upload 与SpringMVC结合</a><br><a href="http://www.yihaomen.com/article/java/416.htm" target="_blank" rel="external">最适合中国国情的jquery file upload 批量上传改版插件,结合spring mvc</a></p>
<h3 id="Uploadify"><a href="http://www.uploadify.com/" target="_blank" rel="external">Uploadify</a></h3><p>1、高度地定义化，参数、方法和事件丰富<br>2、支持Flash和html两种版本<br>3、强大的社区支持<br>4、支持多文件上传和进度显示</p>
<h3 id="Plupload"><a href="http://www.plupload.com/" target="_blank" rel="external">Plupload</a></h3><p>Plupload这个JavaScript控件可以让你选择Adobe Flash、Google Gears、HTML5、Microsoft Silverlight、Yahoo BrowserPlus或正常表单Form等多种方法进行文件上传。Plupload还提供其它功能包括：上传进度提醒、图片缩小、多文件上传，拖拽文件到上传控件，文件类型过滤和Chunked上传等。这些功能在不同的上传方式中支持情况会受到限制。</p>
<h3 id="DropzoneJS"><a href="https://github.com/enyo/dropzone" target="_blank" rel="external">DropzoneJS</a></h3><p>特点是Dropzone 不依赖其它框架（比如jQuery)。提供 AJAX 异步上传功能。</p>
<h3 id="Web_Uploader"><a href="http://fex.baidu.com/webuploader/" target="_blank" rel="external">Web Uploader</a></h3><p>WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。<br>采用大文件分片并发上传，极大的提高了文件上传效率。</p>
<h3 id="zyFile"><a href="http://www.czlqibu.com/show.html?id=190" target="_blank" rel="external">zyFile</a></h3><p>zyFile特点是简单，中文注释挺全，可以修改一下满足自己的需求。</p>

      
    </div>
    <footer class="article-footer">
	  
	  <!-- 百度分享 Start -->
	  <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
	  <!-- 百度分享 End -->
	  
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/jQuery/">jQuery</a></li></ul>

	  
<span>
Updated:<time datetime="2014-12-24T15:30:16.000Z" itemprop="dateModified">2014-12-24</time>
</span>


    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2015/02/06/thinking-in-java-note-8/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          Java编程思想笔记八
        
      </div>
    </a>
  
  
    <a href="/2014/12/24/javamail/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">JavaMail简介</div>
    </a>
  
</nav>

  
</article>



<!-- 多说评论框 start -->

<section id="comments">
  <div class="ds-thread"  data-thread-key="/2014/12/24/jQuery-plug-in/" data-title="jQuery 插件使用记录" data-url="http://howiefh.github.io/2014/12/24/jQuery-plug-in/" id="ds_thread">
    <noscript>Please enable JavaScript to view the <a href="//duoshuo.com/?ref_noscript">comments powered by duoshuo.</a></noscript>
  </div>
</section>

<!-- 多说评论框 end -->
</section>
        
          
  <div id="toc" class="toc-aside">
  <h2 class="toc-title">Contents</h2>
    
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#dragsort"><span class="toc-number">1.</span> <span class="toc-text">dragsort</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#下载地址：http://dragsort-codeplex-com/"><span class="toc-number">1.1.</span> <span class="toc-text">下载地址：http://dragsort.codeplex.com/</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用方法"><span class="toc-number">1.2.</span> <span class="toc-text">使用方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#一个table示例"><span class="toc-number">1.3.</span> <span class="toc-text">一个table示例</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Validform"><span class="toc-number">2.</span> <span class="toc-text">Validform</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#下载地址：http://validform-rjboy-cn/"><span class="toc-number">2.1.</span> <span class="toc-text">下载地址：http://validform.rjboy.cn/</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用方法-1"><span class="toc-number">2.2.</span> <span class="toc-text">使用方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#绑定附加属性"><span class="toc-number">2.3.</span> <span class="toc-text">绑定附加属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#参数说明"><span class="toc-number">2.4.</span> <span class="toc-text">参数说明</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#公用对象"><span class="toc-number">2.5.</span> <span class="toc-text">公用对象</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#bootstrap-datetimepicker"><span class="toc-number">3.</span> <span class="toc-text">bootstrap-datetimepicker</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#highcharts"><span class="toc-number">4.</span> <span class="toc-text">highcharts</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#下载地址:_http://code-highcharts-com/"><span class="toc-number">4.1.</span> <span class="toc-text">下载地址: http://code.highcharts.com/</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#中文网:_http://www-hcharts-cn/"><span class="toc-number">4.2.</span> <span class="toc-text">中文网: http://www.hcharts.cn/</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#上传文件"><span class="toc-number">5.</span> <span class="toc-text">上传文件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#jQuery_File_Upload"><span class="toc-number">5.1.</span> <span class="toc-text">jQuery File Upload</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Uploadify"><span class="toc-number">5.2.</span> <span class="toc-text">Uploadify</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Plupload"><span class="toc-number">5.3.</span> <span class="toc-text">Plupload</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#DropzoneJS"><span class="toc-number">5.4.</span> <span class="toc-text">DropzoneJS</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Web_Uploader"><span class="toc-number">5.5.</span> <span class="toc-text">Web Uploader</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#zyFile"><span class="toc-number">5.6.</span> <span class="toc-text">zyFile</span></a></li></ol></li></ol>
    
  </div>

<aside id="sidebar">

  
    
<div class="widget-wrap">
  <h3 class="widget-title">ABOUT ME</h3>
  <ul class="widget about-me">
    
    <li><img class="author" title="About me" src="http://fh-1.qiniudn.com/okal-eltocat.jpg" /></li>
    
    
    <li>Hi,I'm FengHao.</li>
    
    <li>I'll share something interesting and my learning experience with you at this blog.</li>
    
    <li>前博客:<a href="http://hi.baidu.com/idea_star" target="_BLANK">百度空间</a></li>
    
  </ul>
</div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Android/">Android</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/C/">C</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Database/">Database</a><span class="category-list-count">13</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Database/MongoDB/">MongoDB</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Database/MySQL/">MySQL</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Eclipse/">Eclipse</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/FTP/">FTP</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Git/">Git</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Hexo/">Hexo</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Java/">Java</a><span class="category-list-count">20</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Java/FreeMarker/">FreeMarker</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Java/Shiro/">Shiro</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaEE/">JavaEE</a><span class="category-list-count">4</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/JavaEE/Hibernate/">Hibernate</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaEE/JSP/">JSP</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaEE/Spring/">Spring</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a><span class="category-list-count">5</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/jQuery/">jQuery</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/">Linux</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/PHP/">PHP</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Suse/">Suse</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Ubuntu/">Ubuntu</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vim/">Vim</a><span class="category-list-count">8</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/编程/">编程</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/软件/">软件</a><span class="category-list-count">1</span></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/Android/" style="font-size: 14.75px; color: #65bfa7">Android</a> <a href="/tags/C/" style="font-size: 13.88px; color: #71c1c2">C</a> <a href="/tags/CAS/" style="font-size: 13px; color: #7dc3de">CAS</a> <a href="/tags/Chrome/" style="font-size: 13px; color: #7dc3de">Chrome</a> <a href="/tags/Clean-Code/" style="font-size: 13.88px; color: #71c1c2">Clean Code</a> <a href="/tags/Database/" style="font-size: 13px; color: #7dc3de">Database</a> <a href="/tags/Eclipse/" style="font-size: 13px; color: #7dc3de">Eclipse</a> <a href="/tags/FTP/" style="font-size: 13.88px; color: #71c1c2">FTP</a> <a href="/tags/FreeMarker/" style="font-size: 14.75px; color: #65bfa7">FreeMarker</a> <a href="/tags/Gcc/" style="font-size: 13px; color: #7dc3de">Gcc</a> <a href="/tags/Git/" style="font-size: 14.75px; color: #65bfa7">Git</a> <a href="/tags/Github-Pages/" style="font-size: 13px; color: #7dc3de">Github Pages</a> <a href="/tags/Hexo/" style="font-size: 14.75px; color: #65bfa7">Hexo</a> <a href="/tags/Hibernate/" style="font-size: 13px; color: #7dc3de">Hibernate</a> <a href="/tags/JSP/" style="font-size: 13px; color: #7dc3de">JSP</a> <a href="/tags/JVM/" style="font-size: 14.75px; color: #65bfa7">JVM</a> <a href="/tags/Java/" style="font-size: 14.75px; color: #65bfa7">Java</a> <a href="/tags/JavaMail/" style="font-size: 13px; color: #7dc3de">JavaMail</a> <a href="/tags/JavaScript/" style="font-size: 16.5px; color: #4dbc6f">JavaScript</a> <a href="/tags/Linux/" style="font-size: 13.88px; color: #71c1c2">Linux</a> <a href="/tags/Log/" style="font-size: 13px; color: #7dc3de">Log</a> <a href="/tags/Markdown/" style="font-size: 13.88px; color: #71c1c2">Markdown</a> <a href="/tags/MongoDB/" style="font-size: 20px; color: #1db400">MongoDB</a> <a href="/tags/MySQL/" style="font-size: 13.88px; color: #71c1c2">MySQL</a> <a href="/tags/PHP/" style="font-size: 16.5px; color: #4dbc6f">PHP</a> <a href="/tags/Rhythmbox/" style="font-size: 13px; color: #7dc3de">Rhythmbox</a> <a href="/tags/SSO/" style="font-size: 13px; color: #7dc3de">SSO</a> <a href="/tags/Servlet/" style="font-size: 13px; color: #7dc3de">Servlet</a> <a href="/tags/Shiro/" style="font-size: 13.88px; color: #71c1c2">Shiro</a> <a href="/tags/Spring/" style="font-size: 13.88px; color: #71c1c2">Spring</a> <a href="/tags/Suse/" style="font-size: 13px; color: #7dc3de">Suse</a> <a href="/tags/Thinking-in-Java/" style="font-size: 19.13px; color: #29b61c">Thinking in Java</a> <a href="/tags/Ubuntu/" style="font-size: 17.38px; color: #41ba53">Ubuntu</a> <a href="/tags/Vim/" style="font-size: 18.25px; color: #35b838">Vim</a> <a href="/tags/VirtualBox/" style="font-size: 13px; color: #7dc3de">VirtualBox</a> <a href="/tags/Vsftpd/" style="font-size: 13px; color: #7dc3de">Vsftpd</a> <a href="/tags/jQuery/" style="font-size: 13px; color: #7dc3de">jQuery</a> <a href="/tags/pam-mysql/" style="font-size: 13px; color: #7dc3de">pam_mysql</a> <a href="/tags/小米/" style="font-size: 13px; color: #7dc3de">小米</a> <a href="/tags/软件/" style="font-size: 15.63px; color: #59bd8b">软件</a>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/09/">September 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/08/">August 2015</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/07/">July 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/05/">May 2015</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/04/">April 2015</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/03/">March 2015</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/02/">February 2015</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/12/">December 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/11/">November 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/10/">October 2014</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/09/">September 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/08/">August 2014</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/07/">July 2014</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/06/">June 2014</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/05/">May 2014</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/04/">April 2014</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/03/">March 2014</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/02/">February 2014</a><span class="archive-list-count">11</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/01/">January 2014</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/12/">December 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/11/">November 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/08/">August 2013</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/07/">July 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/06/">June 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/05/">May 2013</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/04/">April 2013</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/03/">March 2012</a><span class="archive-list-count">1</span></li></ul>
    </div>
  </div>


  
    <div class="widget-wrap">
  <h3 class="widget-title">Calendar</h3>
  <div class="widget">
    <div id="g-calendar" class="g-calendar">
        <span class="g-calendar-prev"></span>
		 
        <span class="g-calendar-back"></span>
        <span class="g-calendar-now"></span>
		 
        <span class="g-calendar-next"></span>
        <div class="g-calendar-hd"></div>
        <div class="g-calendar-tit"></div>
        <div class="g-calendar-bd"></div>
    </div>
  </div>
</div>
<script type="text/javascript">
function LGY_calendar(wrapId, options){
    this.oWrap = this.getId(wrapId);
    this.oHead = this.getByClassName('g-calendar-hd',this.oWrap)[0];
    this.oBody = this.getByClassName('g-calendar-bd',this.oWrap)[0];
    this.oTit = this.getByClassName('g-calendar-tit',this.oWrap)[0];
    this.oPrev = this.getByClassName('g-calendar-prev',this.oWrap)[0];
    this.oNext = this.getByClassName('g-calendar-next',this.oWrap)[0];
    this.oNow = this.getByClassName('g-calendar-now',this.oWrap)[0];
    this.oBack = this.getByClassName('g-calendar-back',this.oWrap)[0];
    this.init();
}
LGY_calendar.prototype = {
    ///////////获取ID元素
    getId:function(id){
        return document.getElementById(id);
    },
    ////////获取css类名元素
    getByClassName:function(className,parent){
        var elem = [],
            node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
            p = new RegExp("(^|\\s)"+className+"(\\s|$)");
        for(var n=0,i=node.length;n<i;n++){
            if(p.test(node[n].className)){
                elem.push(node[n]);
            }
        }
        return elem;
    },
    //填充日历
    fillDate:function(year,month){
        //本月份第一天是星期几-为显示上个月的天数做铺垫
        var first_day = new Date(year,month,1).getDay(),
        //如果刚好是星期天，则空出一行（显示上个月的天数）
            first_day = first_day == 0?first_day=7:first_day;
        //本月份最后一天是几号
        var final_date = new Date(year,month+1,0).getDate(),
        //上个月的最后一天是几号
            last_date = new Date(year,month,0).getDate(),
        //剩余的格子数--即排在末尾的格子数
            surplus = 42 - first_day - final_date;
        //设置年的链接
        var yearHead = "<a href='/" + "archives/" + year + "/'>" + year + " "+ "</a>"; 
        //设置年的链接
        var monthHead = "";
        var month1 = month + 1;
        if (month1 < 10) {
            monthHead = "<a href='/" + "archives/" + year + "/" + "0" + month1 + "/'>" + " " + month1 + " " + "</a>";
        } else {
            monthHead = "<a href='/" + "archives/" + year + "/" + month1 + "/'>" + " " + month1 + " " + "</a>";
        }
        //设置表头的日历
        this.oHead.innerHTML = yearHead+'年'+monthHead+'月';
        //填充日历执行
        var html = '';
        //上个月的显示天数
        for(var i=0;i<first_day;i++){
            html+='<span class="g-calendar-grey">'+(last_date-(first_day-1)+i)+'</span>';
        }
        //本月的显示天数
        var postdate = new Date("Wed Dec 24 2014 15:20:47 GMT+0800"); 
        if (true && postdate.getFullYear() == year && postdate.getMonth() == month) { 
            html += '<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span><a href="/2014/12/24/javamail/" title="当天有2篇博客,第一篇:JavaMail简介">24</a></span><span>25</span><span>26</span><span>27</span><span>28</span><span>29</span><span>30</span>';
        } else {
            for(var j=0;j<final_date;j++){        
                html+='<span id="d'+(j+1)+'">'+(j+1)+'</span>';
            }
        }
        //下个月的显示天数
        for(var k=0;k<surplus;k++){
            html+='<span class="g-calendar-grey">'+(k+1)+'</span>';
        }
        //fill
        this.oBody.innerHTML = html;
        // 当前状态
        if(year==this.c_year&&this.c_month==month){
            this.oBody.getElementsByTagName('span')[first_day+this.date-1].className='g-calendar-on';
        }

        // 对所有文章遍历,然后将有文章的日期加上链接,如果文章太多的话,生成页面会很大,去掉了
        
    },
    // next切换
    next:function(){
        var _that = this;
        this.oNext.onclick = function(){
            _that.month++;
            if(_that.month>11){
                _that.month = 0;
                _that.year++;
            }
            // 填充日历
            _that.fillDate(_that.year,_that.month);
        };
    },
    // back 切换
    back:function(){
        var _that = this;
        if(this.oBack != undefined) {
            this.oBack.onclick = function(){
                var postdate = new Date("Wed Dec 24 2014 15:20:47 GMT+0800"); 
                _that.year = postdate.getFullYear();
                _that.month = postdate.getMonth();
                // 填充日历
                _that.fillDate(_that.year,_that.month);
            };
        }
    },
    // now切换
    now:function(){
        var _that = this;
        if(this.oNow != undefined ) {
            this.oNow.onclick = function(){
                var nowDate = new Date(); 
                _that.year = nowDate.getFullYear();
                _that.month = nowDate.getMonth();
                // 填充日历
                _that.fillDate(_that.year,_that.month);
            };
        }
    },
    // prev切换
    prev:function(){
        var _that = this;
        this.oPrev.onclick = function(){
            _that.month--;
            if(_that.month<0){
                _that.month = 11;
                _that.year--;
            }
            // 填充日历
            _that.fillDate(_that.year,_that.month);
        };
    },
    init:function(){
        this.oTit.innerHTML = '<span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>';
        // 获取今天的日历时间
        var now = new Date();
        this.c_year = this.year = now.getFullYear();
        this.c_month = this.month = now.getMonth();
        this.date = now.getDate();
        // 初始化--填充日历
        this.fillDate(this.year,this.month);
        //next切换
        this.next();
        //prev切换
        this.prev();
        //back 切换
        this.back();
        //now 切换
        this.now();
    }
}
new LGY_calendar('g-calendar');
</script>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2015/09/01/javascript-summary/">JavaScript 总结</a>
          </li>
        
          <li>
            <a href="/2015/08/28/javascript-oop-function-expression-and-async/">JavaScript 面向对象程序设计、函数表达式和异步编程</a>
          </li>
        
          <li>
            <a href="/2015/08/28/javascript-reference-type/">JavaScript 引用类型</a>
          </li>
        
          <li>
            <a href="/2015/08/28/javascript-grammar/">JavaScript 基本语法</a>
          </li>
        
          <li>
            <a href="/2015/08/10/java-web/">Java Web 笔记</a>
          </li>
        
      </ul>
    </div>
  </div>


  
    
<div class="widget-wrap">
  <h3 class="widget-title">Recent Comments</h3>
  <ul class="widget ds-recent-comments" data-num-items="5" data-show-avatars="0" data-show-title="1" data-show-time="1"></ul>
</div>
<!-- 需要多说的公用代码 -->


  

</aside>

        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2015 howiefh<br>
      Powered by <a href="http://zespia.tw/hexo/" target="_blank">Hexo</a> and Theme by <a href="https://github.com/howiefh/hexo-theme-landscape-f" target="_blank" title="Landscape-F">Landscape-F</a>
    </div>
  </div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<!-- 多说公共JS代码 start (一个网页只需插入一次) -->

<script type="text/javascript">
  var duoshuoQuery = {short_name:"howiefh"};
  (function() {
	var ds = document.createElement('script');
	ds.type = 'text/javascript';ds.async = true;
	ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
	ds.charset = 'UTF-8';
	(document.getElementsByTagName('head')[0] 
		|| document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
</script> 

<!-- 多说公共JS代码 end -->

<!-- 百度分享 start -->

<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":["mshare","douban","bdysc","sqq","qq","hi","baidu","huaban","youdao","sdo","mail","xg","diandian","fx","copy","print"],"bdPic":"","bdStyle":"1","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

<!-- 百度分享 end -->

<!--
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="/js/jquery.min.js"></script>
-->
<script src="/js/jquery.min.js" type="text/javascript"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css">
  <script src="/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>


<div class="bottom-btn">

	<a class="icon-gotop" href="javascript:void(0)" title="返回顶部"></a>
	<script src="/js/gotop.js" type="text/javascript"></script>
	<!--
	<script src="/js/gotop.js"></script>
	-->


	<a class="icon-toc-toggle" href="javascript:void(0)" title="文章目录"></a>
	<!--
	<script src="/js/toc_aside_toggle.js"></script>
	-->

</div>
<script src="/js/toc_aside_toggle.js" type="text/javascript"></script>


<script src="/js/script.js" type="text/javascript"></script>

  </div>
</body>
</html>
